<template>
  <view class="webview-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <u-icon 
          name="arrow-left" 
          size="20" 
          color="#333" 
          @click="goBack"
        ></u-icon>
        <text class="navbar-title">{{ pageTitle }}</text>
        <view class="navbar-right">
          <u-icon 
            name="more-dot-fill" 
            size="20" 
            color="#333" 
            @click="showMenu"
          ></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 网页内容 -->
    <web-view 
      :src="webUrl" 
      @message="onMessage"
      @error="onError"
      @load="onWebViewLoad"
    ></web-view>
    
    <!-- 加载中提示 -->
    <view v-if="loading" class="loading-overlay">
      <u-loading-icon size="40"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class WebviewPage extends Vue {
  // 数据属性
  statusBarHeight: number = 0;
  webUrl: string = '';
  pageTitle: string = '详情页面';
  loading: boolean = true;
  
  // 生命周期
  onLoad(options: any) {
    this.initPage(options);
  }
  
  // 方法
  
  /**
   * 初始化页面
   */
  initPage(options: any) {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    
    // 获取URL参数
    if (options.url) {
      this.webUrl = decodeURIComponent(options.url);
    }
    
    // 获取标题参数
    if (options.title) {
      this.pageTitle = decodeURIComponent(options.title);
      
      // 设置页面标题
      uni.setNavigationBarTitle({
        title: this.pageTitle
      });
    }
    
    // 验证URL
    if (!this.webUrl) {
      uni.showModal({
        title: '错误',
        content: '无效的网页链接',
        showCancel: false,
        success: () => {
          uni.navigateBack();
        }
      });
    }
  }
  
  /**
   * 返回上一页
   */
  goBack() {
    uni.navigateBack();
  }
  
  /**
   * 显示菜单
   */
  showMenu() {
    uni.showActionSheet({
      itemList: ['刷新页面', '复制链接', '在浏览器中打开'],
      success: (res) => {
        switch (res.tapIndex) {
          case 0:
            this.refreshPage();
            break;
          case 1:
            this.copyUrl();
            break;
          case 2:
            this.openInBrowser();
            break;
        }
      }
    });
  }
  
  /**
   * 刷新页面
   */
  refreshPage() {
    this.loading = true;
    // 重新加载webview
    this.$forceUpdate();
  }
  
  /**
   * 复制链接
   */
  copyUrl() {
    uni.setClipboardData({
      data: this.webUrl,
      success: () => {
        uni.showToast({
          title: '链接已复制',
          icon: 'success'
        });
      }
    });
  }
  
  /**
   * 在浏览器中打开
   */
  openInBrowser() {
    // #ifdef APP-PLUS
    plus.runtime.openURL(this.webUrl);
    // #endif
    
    // #ifdef H5
    window.open(this.webUrl, '_blank');
    // #endif
    
    // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-XHS
    uni.showModal({
      title: '提示',
      content: '小程序中无法直接打开外部链接，链接已复制到剪贴板',
      showCancel: false,
      success: () => {
        this.copyUrl();
      }
    });
    // #endif
  }
  
  /**
   * 网页加载完成
   */
  onWebViewLoad() {
    this.loading = false;
  }
  
  /**
   * 网页加载错误
   */
  onError(error: any) {
    console.error('网页加载错误:', error);
    this.loading = false;
    
    uni.showModal({
      title: '加载失败',
      content: '网页加载失败，请检查网络连接或稍后重试',
      confirmText: '重试',
      cancelText: '返回',
      success: (res) => {
        if (res.confirm) {
          this.refreshPage();
        } else {
          uni.navigateBack();
        }
      }
    });
  }
  
  /**
   * 接收网页消息
   */
  onMessage(event: any) {
    console.log('收到网页消息:', event.detail.data);
    
    // 处理网页发送的消息
    const data = event.detail.data[0];
    if (data && data.type) {
      switch (data.type) {
        case 'setTitle':
          if (data.title) {
            this.pageTitle = data.title;
            uni.setNavigationBarTitle({
              title: this.pageTitle
            });
          }
          break;
        case 'close':
          uni.navigateBack();
          break;
        default:
          console.log('未知消息类型:', data.type);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.webview-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.custom-navbar {
  background-color: white;
  border-bottom: 1rpx solid #e0e0e0;
  z-index: 1000;
  
  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 30rpx;
    
    .navbar-title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin: 0 20rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .navbar-right {
      width: 40rpx;
      display: flex;
      justify-content: flex-end;
    }
  }
}

web-view {
  flex: 1;
}

.